

.rs-tabbar{
    position: relative;
    height:$tabHeight;
    background-color: $tabBarBg;
    padding:2px 1px 1px;
    border-left: solid 1px $borderColor;
    border-right: solid 1px $borderColor;
    //border-bottom: solid 1px $borderColor;
    box-sizing: border-box;
    overflow: hidden;

    .left-nav,.right-nav{
        position: absolute;
        top:0;
        height:$tabHeight;
        line-height: $tabHeight;
        cursor: pointer;
        user-select: none;
        border: solid 1px $borderColor;
        z-index: 1000;
        &::before{
            position: absolute;
            left:0;
            top:0px;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0;
            content: ' ';
        }
        &:hover{
            &::before{
                opacity:0.1;
            }
        }
    }
    .left-nav{
        left:-1px;
    }
    .right-nav{
        right:-1px;
    }
    &.scrollable{
        padding: 2px 18px 0px;
    }
    .tab-wrapper{
        position: relative;
        height: 34px;
        overflow: hidden;
    }
    .tab-container{
        position: relative;
        //overflow: hidden; 
        height: 34px;
        border-bottom: solid 1px $borderColor;
        .tab-items{
            position: relative;
            white-space: nowrap;
            float: left;
            transition: transform .3S ease-in-out;
            height: $tabHeight - 2px;
            .tab-item{
                position: relative;
                box-sizing: border-box;
                display: inline-block;
                height: $tabHeight - 2px;
                line-height: $tabHeight - 2px;
                //background-color: #f7f7f7;#F8F8F8
                background: linear-gradient(to bottom,#F9F9F9 0,#eee 100%);
                cursor: pointer;
                user-select: none;
                color: #555;
                margin: 0px 4px 0px 0;
                vertical-align: middle;
                >.text{
                    display: block;
                    border: solid 1px #d3d3d3;
                    border-radius: 2px 2px 0 0;
                    padding: 0 20px;
                    font-size: 14px;
                    height:34px;
                    >.icon{
                        position: absolute;
                        font-size: 14px;
                        left:3px;
                        line-height: 1;
                        top:50%;
                        //transform: translateY(-50%);
                        margin-top: -5px;
                        font-weight: 800;
                    }
                    &:hover{
                        color:#000;
                    }
                }
                &.select{
                    >.text{
                        background-color:#fff;
                        border-bottom-color: #3c8dbc;
                        border-bottom-width: 3px;
                    }
                }
                >.close{
                    position: absolute;
                    font-size: 12px;
                    right:3px;
                    line-height: 1;
                    top:50%;
                    //transform: translateY(-50%);
                    margin-top: -5px;
                    font-weight: 800;
                    &:hover{
                        color:#000;
                    }
                }
                &:last-child{
                    margin-right: 0;
                }
            }
        }
    }    
}